<template>
  <!-- 打印预览 -->
  <div class="print-wrap" ref="print">
    <div class="receipt-title">缴费发票</div>
    <div class="divide-line">--------------------------------------------------------</div>
    <div class="base-info">
      <div>打印时间：{{ receipt.printTime }}</div>
      <div>操作人：{{ receipt.printUser }}</div>
    </div>
    <div class="divide-line">--------------------------------------------------------</div>
    <div class="payment-info">
      <div>缴费时间：{{ receipt.paymentTime }}</div>
      <div>缴费金额：{{ receipt.paymentMoney }}</div>
      <div>缴费人：{{ receipt.paymentUser }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    receipt: {
      printTime: '',
      printUser: '',
      paymentTime: '',
      paymentMoney: '',
      paymentUser: ''
    }
  }
}
</script>

<style scoped lang="scss">
.print-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid #616165;
  margin: 50px auto;
  width: 300px;
  height: 400px;
  .receipt-title {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .divide-line {
    text-align: center;
    margin: 5px 0;
  }
  .base-info {
    margin-left: 20px;
    line-height: 1.5;
  }
  .payment-info {
    margin-left: 20px;
    line-height: 1.5;
  }
}
</style>
